<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick"  type="border-card">
            <el-tab-pane label="条件过滤" name="condition">
                <el-form ref="form" :model="condition" label-width="80px">
                    <el-form-item label="满足以下">
                        <el-select v-model="condition.ANDOR" placeholder="请选择">
                            <el-option label="全部条件" value=" AND "></el-option>
                            <el-option label="任意条件" value=" OR "></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" v-for="count in line" :key="count">
                    <el-row :gutter="12">
                        <el-col :span="4" >
                        <el-select v-model="tableNames[count-1]" placeholder="请选择表" >
                            <el-option :label="item.label" :value="item.id" v-for="item in tableNodes" :key="item.id"></el-option>
                        </el-select>
                        </el-col>
                        <el-col :span="4">
                        <el-select v-model="columns[count-1]" placeholder="请选择字段">
                            <el-option label="日期" value="date"></el-option>
                            <el-option label="来源" value="source"></el-option>
                            <el-option label="地区" value="place"></el-option>
                        </el-select>
                        </el-col>
                        <el-col :span="2">
                            <el-select v-model="expressions[count-1]" placeholder="请选择字段">
                                <el-option label="等于" value="="></el-option>
                                <el-option label="不等于" value="!="></el-option>
                                <el-option label="包含" value="like"></el-option>
                                <el-option label="不包含" value="not like"></el-option>
                                <el-option label="为空" value="is null"></el-option>
                                <el-option label="不为空" value="is not null"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" >
                                <el-input v-model="inputVals[count-1]" placeholder="请输入值"></el-input>
                        </el-col>
                        <el-col :span="1" :offset="1">
                        <el-button type="primary" icon="el-icon-plus" @click="addLine"></el-button>
                        </el-col>
                        <el-col :span="1" :offset="1">
                        <el-button type="primary" icon="el-icon-minus" @click="removeLine(count)"></el-button>
                        </el-col>
                    </el-row>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="表达式过滤" name="expression">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div >
                            <el-tabs v-model="expressionActiveName"  >
                                <el-tab-pane label="字段" name="col">
                                    <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                                </el-tab-pane>
                                <el-tab-pane label="函数" name="func">
                                    <ul v-for="funcName in funcNameArray"  :key="funcName.value">
                                        <li  @click="selectFunc(funcName.value)">
                                            {{funcName.key}}
                                        </li>
                                    </ul>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div >
                                <div class="el-textarea el-input--mini">
                                    <textarea v-model="sqlWhere" id="sqlWhere" autocomplete="off" rows="7" placeholder="请输入内容" class="el-textarea__inner" style="min-height: 30px;">
                                    </textarea><!---->
                                </div>
                        </div>

                    </el-col>
                    <el-col :span="2">
                        <div >
                            <el-button type="primary">语法检查</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import eventBus from "@/utils/eventBus";
export default {
    data(){
        return{
            page: {},
            graph: {},
            activeName: 'condition',
            line: 1,
            tableNames:[],
            tableNodes: [],
            columns:[],
            expressions:[],
            inputVals:[],
            condition:{},
            treeData:[],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            expressionActiveName:'col',
            sqlWhere:'',
            funcNameArray:[{
                key:'ROW_MAX',
                value:'ROW_MAX()'
            },{
                key:'ROW_MIN',
                value:'ROW_MIN()'
            },{
                key:'DATE_ADD',
                value:'DATE_ADD()'
            },{
                key:'DATE_AFTER',
                value:'DATE_AFTER()'
            }]
        }
    },
    created(){
        // TODO
        // this.init();
        this.bindEvent();
    },
    methods:{
        init() {
            const { editor, command } = this.$parent;
            this.editor = editor;
            this.command = command;
        },
        bindEvent(){
            let self = this;
            eventBus.$on("afterAddPage", page => {
                self.page = page;
                self.graph = self.page.graph;
                
            })
            
        },
        bindVal(){
            this.tableNodes.length = 0
            self.graph.findAll('node', node => {
                let tableNode = {}
                tableNode.id=node.get('model').id
                tableNode.label=node.get('model').label
                this.tableNodes.push(tableNode)
            });
            // window.console.info(nodes);
        },
        addLine(){
            //TODO 校验非空
            this.line +=1
        },
        removeLine(count){
            this.line -=1
            this.tableNames.splice(count-1,1);
            this.columns.splice(count-1,1);
            this.expressions.splice(count-1,1);
            this.inputVals.splice(count-1,1);
        },
        handleClick(tab) {
            this.activeName = tab.name
            if(tab.name === 'expression'){
                this.tableNodes.forEach(element => {
                    let treeNode = {}
                    treeNode.label=element.label
                    treeNode.id=element.id
                    treeNode.children = [{'label':'日期','id':'[日期]'},{'label':'来源','id':'[来源]'},{'label':'地区','id':'[地区]'}]
                    this.treeData.push(treeNode)
                });
            }
        },
        selectFunc(value){
            this.sqlWhere += value
        },
        handleNodeClick(node){ // 后台遇到[] 则进行转换
            if(node.children == null){
                const sqlWhereDom = document.querySelector('#sqlWhere')
                if (sqlWhereDom.selectionStart || sqlWhereDom.selectionStart === 0) {
                    let startPos = sqlWhereDom.selectionStart;
                    let endPos = sqlWhereDom.selectionEnd;
                    this.sqlWhere = sqlWhereDom.value.substring(0, startPos) + node.id + sqlWhereDom.value.substring(endPos, sqlWhereDom.value.length);
                    this.$nextTick(()=>{
                        sqlWhereDom.focus();
                        sqlWhereDom.setSelectionRange(endPos + node.id.length, endPos + node.id.length)
                    })
                    } else {
                    this.sqlWhere += node.id
                    }
            }
        }
    }
}
</script>